<template>
  <h3>首页读取API显示汇率信息</h3>

  <!-- 表格组件 -->
  <el-table :data="tableData" style="width: 100%" max-height="800">
    <el-table-column prop="date" label="日期" width="180" />
    <el-table-column prop="rate" label="汇率" width="180" />
  </el-table>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'
import axios from 'axios'

interface RateData {
  date: string
  rate: number
}

export default defineComponent({
  name: 'home',
  setup() {
    const tableData = ref<RateData[]>([])

    // 获取汇率数据
    const fetchRateData = async () => {
      try {
        const response = await axios.get('api/rate/rate_date', {
          params: {
            start_date: '2024-09-10 00:00:00.000',
            end_date: '2026-02-10 00:00:00.000'
          }
        })

        if (response.data.code === 200) {
          // 将对象转换为数组格式以适配表格
          const data = response.data.data
          tableData.value = Object.entries(data).map(([date, rate]) => ({
            date,
            rate
          }))
        }
      } catch (error) {
        console.error('获取汇率数据失败:', error)
      }
    }

    // 组件挂载时获取数据
    onMounted(() => {
      fetchRateData()
    })

    return {
      tableData
    }
  }
})
</script>
